<template>
	<view class="News">
		<!-- <view class="status_bar"> -->
		  <!-- 这里是状态栏 -->
		<!-- </view> -->
		<!-- <u-navbar  title="消息"> -->
			<!-- <view class="slotBox" slot="right">
				<view style="padding-right: 50upx;">清除未读</view>
			</view> -->
		<!-- </u-navbar> -->
		<!-- #ifdef MP-WEIXIN -->
		<official-account></official-account>
		<!-- #endif -->
		<view class="NewsBox">
			<view class="NewsList">
				<!-- <view>{{txt1}}</view>
				<view>{{txt2}}</view> -->
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange">
						<view class="NewsItem" @click="tosystemInfo">
							<view class="NewsIcon">
								<image src="/static/new/system.png" mode=""></image>
							</view>
							<view class="NewsInfo" style="display: flex;flex-direction: column;justify-content: center;">
								<view class="NewsNameBox">
									<view class="UnreadBox">
										<view class="NewsName">系统消息</view>
										<!-- <view class="Unread"></view> -->
									</view>
									<!-- <view class="Newstime">星期五</view> -->
								</view>
								<!-- <view class="Newstext">您有一条</view> -->
							</view>
						</view>
					</uni-swipe-action-item>
				
					<!-- <uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange">
						<view class="NewsItem">
							<view class="NewsIcon" style="background: linear-gradient(180deg, #FFF6BD 0%, #FDFFC4 100%);">
								<image src="/static/new/assistant.png" mode=""></image>
							</view>
							<view class="NewsInfo">
								<view class="NewsNameBox">
									<view class="UnreadBox">
										<view class="NewsName">使用帮手</view>
										<view class="Unread"></view>
									</view>
									<view class="Newstime">星期五</view>
								</view>
								<view class="Newstext">点击查看</view>
							</view>
						</view>
					</uni-swipe-action-item>

					<uni-swipe-action-item :right-options="options"  @click="bindClick" @change="swipeChange">
						<view class="NewsItem">
							<view class="NewsIcon" style="background: linear-gradient(180deg, #BDFFC8 0%, #C4FFD4 100%);">
								<image src="/static/new/customer.png" mode=""></image>
							</view>
							<view class="NewsInfo">
								<view class="NewsNameBox">
									<view class="UnreadBox">
										<view class="NewsName">在线客服</view>
										<view class="Unread"></view>
									</view>
									<view class="Newstime">星期五</view>
								</view>
								<view class="Newstext">你好</view>
							</view>
						</view>
					</uni-swipe-action-item> -->

					<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange" v-for="(item,index) in list" :key="index">
						<view class="NewsItem" @click="toChatBox" :data-id="item.vice_user_id">
							<view class="NewsIcon1">
								<image :src="getImage(item.viceUser.image_url)" mode=""></image>
							</view>
							<view class="NewsInfo">
								<view class="NewsNameBox">
									<view class="UnreadBox">
										<view class="NewsName">{{item.viceUser.username}}</view>
										<view class="Unread" v-if="item.unread_num>0">{{item.unread_num?item.unread_num:0}}</view>
									</view>
									<view class="Newstime">{{item.update_time}}</view>
								</view>
								<view class="Newstext">{{item.latest_news}}</view>
							</view>
						</view>
					</uni-swipe-action-item>
					
				</uni-swipe-action>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				options:[
					{text: '删除',style: {backgroundColor: '#dd524d'}}
				],
				page:1,
				moreFlag:false,
				list:[],
				txt1:"",
				txt2:""
			}
		},
		onShow() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			console.log(app.$vm.globalData.dxFlag,"`````````````````````````````````1")
			this.txt1 = app.$vm.globalData.dxFlag;
			console.log(app.$vm.globalData.hideFlag)
			if(app.$vm.globalData.hideFlag){
				Promise.all([app.$vm.loadMsg()]).then(m=>{
					console.log(app.$vm.globalData.dxFlag,"`````````````````````````````````2")
					this.txt2 = app.$vm.globalData.dxFlag;
					this.page = 1;
					this.list = [];
					this.getMessage();
					this.getMsgList();
					this.sendNum();
				})
			}else{
				this.txt2 = "666666";
				this.page = 1;
				this.list = [];
				this.getMessage();
				this.getMsgList();
				this.sendNum();
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getMsgList();
			
		},
		methods: {
			sendNum(){
				if(uni.getStorageSync("rmToken")){
					app.$vm.sendMessage({"contacts":2});
				}
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getMessage(){
				uni.onSocketMessage(res=>{
					console.log(res)
					let data = JSON.parse(res.data);
					if(data.state==1){
						if(this.page==1){
							this.list = data.data;
						}else{
							this.list = this.list.concat(data.data);
						}
						if(data.data.length>0){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
						// uni.$forceUpdate();
					}
					if (data.state == 2 && data.num>0){
					  app.$vm.globalData.msgNum = data.num;
						uni.setTabBarBadge({
						  index: 2,
						  text: app.$vm.globalData.msgNum.toString()
						});
						app.$vm.setBadge(Number(app.$vm.globalData.msgNum));
					}else if(data.state == 2 && data.num == 0){
						app.$vm.globalData.msgNum = data.num;
						uni.hideTabBarRedDot({
							index:2
						})
						app.$vm.clearBadge();
					}
					if (data.vice_user_id==uni.getStorageSync("userId")){
					  app.$vm.globalData.msgNum = Number(app.$vm.globalData.msgNum) + 1;
						uni.setTabBarBadge({
						  index: 2,
						  text: app.$vm.globalData.msgNum.toString()
						});
						app.$vm.setBadge(Number(app.$vm.globalData.msgNum));
						this.page = 1;
						this.getMsgList()
					}
					console.log(data)
				})
			},
			getMsgList(){
				let obj = {};
				obj.contacts = 1;
				obj.page = this.page;
				app.$vm.sendMessage(obj);
				app.$vm.sendMessage({
					"contacts": 2
				});
			},
			bindClick(e){
			  // console.log(e);
				if(e.index == 0){
					console.log("点击了已读");
					return false;
				}
				if(e.index == 1){
					console.log("删除");
					return false;
				}
			},
			swipeChange(e){
			  console.log(e)
			},
			//系统消息
			tosystemInfo(e){
				uni.navigateTo({
					url:"/pages/pagefive/pages/systemInfo/systemInfo"
				})
			},
			//聊天框
			toChatBox(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pageone/pages/ChatBox/ChatBox?id="+id
				})
			}
		}
	}
</script>

<style scoped lang="less">
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}
.News{
	background-color: #F3F3F3;
	min-height: 100vh;
	overflow: auto;
	// padding-top: 88upx;
	.NewsBox{
		margin-top: 16upx;
		.NewsList{
			// padding: 0 24upx;
			background-color: #fff;
			.NewsItem{
				display: flex;
				// width: 750upx;
				padding: 32upx 24upx;
				border-bottom: 2upx solid #EFEFEF;
				.NewsIcon{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 72upx;
					height: 72upx;
					background: linear-gradient(180deg, #BDF0FF 0%, #C2EFFF 65%, #C4EFFF 100%);
					border-radius: 50%;
					margin-right: 16upx;
					image{
						width: 32upx;
						height: 32upx;
					}
				}
				.NewsIcon1{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 72upx;
					height: 72upx;
					// background: linear-gradient(180deg, #BDF0FF 0%, #C2EFFF 65%, #C4EFFF 100%);
					border-radius: 50%;
					margin-right: 16upx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.NewsInfo{
					width: calc(100% - 88upx);
					.NewsNameBox{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.UnreadBox{
							display: flex;
							align-items: center;
							.NewsName{
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
							}
							.Unread{
								// width: 16upx;
								// height: 16upx;
								padding: 8upx;
								background: #FF5555;
								border-radius: 20upx;
								opacity: 1;
								margin-left: 16upx;
								font-size: 24upx;
								color: white;
							}
						}
						.Newstime{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #D0D0D0;
						}
					}
					.Newstext{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-top: 16upx;
					}
				}
			}
		}
		// .OtherNewsBox{
		// 	// padding: 0 24upx;
		// 	background-color: #fff;
		// 	.otherNewList{
		// 		.NewsItem{
		// 			display: flex;
		// 			// width: 750upx;
		// 			padding: 32upx 0;
		// 			border-bottom: 2upx solid #EFEFEF;
		// 			.NewsIcon{
		// 				display: flex;
		// 				justify-content: center;
		// 				align-items: center;
		// 				width: 72upx;
		// 				height: 72upx;
		// 				background-color: #F0AD4E;
		// 				border-radius: 50%;
		// 				margin-right: 16upx;
		// 				image{
		// 					width: 100%;
		// 					height: 100%;
		// 				}
		// 			}
		// 			.NewsInfo{
		// 				width: calc(100% - 88upx);
		// 				.NewsNameBox{
		// 					display: flex;
		// 					justify-content: space-between;
		// 					align-items: center;
		// 					.UnreadBox{
		// 						display: flex;
		// 						align-items: center;
		// 						.NewsName{
		// 							font-size: 24upx;
		// 							font-family: Source Han Sans CN;
		// 							font-weight: 400;
		// 							color: #333333;
		// 						}
		// 						.Unread{
		// 							width: 16upx;
		// 							height: 16upx;
		// 							background: #FF5555;
		// 							border-radius: 50%;
		// 							opacity: 1;
		// 							margin-left: 16upx;
		// 						}
		// 					}
		// 					.Newstime{
		// 						font-size: 20upx;
		// 						font-family: Source Han Sans CN;
		// 						font-weight: 400;
		// 						color: #D0D0D0;
		// 					}
		// 				}
		// 				.Newstext{
		// 					font-size: 20upx;
		// 					font-family: Source Han Sans CN;
		// 					font-weight: 400;
		// 					color: #999999;
		// 					margin-top: 16upx;
		// 				}
		// 			}
		// 		}
		// 	}
		// }
	}
}
</style>
